<script setup lang='ts'>
import {ref} from 'vue'
import { CopyOutlined,DiffOutlined} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const copyText=ref('哈哈哈')
const pasteText=ref('粘贴文本')

function handleCopyText(text:string) {
    navigator.clipboard.writeText(text)
		.then(()=>{
      message.success(`复制成功 ${text}`)
		})
		.catch(()=>{
      message.error('复制失败，请检查浏览器是否开启复制权限！')
		})
}

function handlePasteText() {
   if(navigator.clipboard && navigator.clipboard.readText)
    navigator.clipboard.readText()
		.then((text)=>{
      message.success('粘贴成功')
			pasteText.value=text
		})
		.catch(()=>{
      message.error('粘贴失败，请检查浏览器是否开启粘贴权限！')
		})
    else {console.log("该浏览器不支持navigator.clipboard.readText api")}
}

</script>

<template>
<div>
    <a-input v-model:value="copyText" style="width: 100px;"/>
    <a-tooltip>
    <template #title>点击复制</template>
		<copy-outlined  style="cursor: pointer;" @click="handleCopyText(copyText)" />
    </a-tooltip>
	  
    <span style="margin-left: 20px;">粘贴内容显示区域:</span>
    <div style="display: inline-block;border: 1px solid;user-select: none;min-width: 50px;height: 25px;" v-text="pasteText"></div>
    <a-tooltip>
    <template #title>点击粘贴</template>
		<diff-outlined style="cursor: pointer;" @click="handlePasteText" />
    </a-tooltip>
</div>
</template>

<style scoped>

</style>